<!--  eslint-disable prettier/prettier -->
<template>
  <div class="index">
    <van-cell-group style="margin-top: 0.1rem">
      <van-cell
        title="发票申请基本信息"
        center
        title-class="green-title-class"
      />
      <!-- 名称 -->
      <van-cell
        @click="handelHideInput('name')"
        v-show="!hideStatus.name"
        title="名称"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.name ? form.name : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.name"
        v-model="form.name"
        ref="name"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="名称"
        @blur="formValueChange('name')"
        placeholder="请输入名称"
      />

      <!-- 开户行 -->
      <van-cell
        @click="handelHideInput('bank')"
        v-show="!hideStatus.bank"
        title="开户行"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.bank ? form.bank : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.bank"
        v-model="form.bank"
        ref="bank"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="开户行"
        @blur="formValueChange('bank')"
        placeholder="请输入开户行"
      />

      <!-- 银行账号 -->
      <van-cell
        @click="handelHideInput('bankAccount')"
        v-show="!hideStatus.bankAccount"
        title="银行账号"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.bankAccount ? form.bankAccount : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.bankAccount"
        v-model="form.bankAccount"
        ref="bankAccount"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="银行账号"
        @blur="formValueChange('bankAccount')"
        placeholder="请输入银行账号"
      />

      <!-- 发票抬头 -->
      <van-cell
        @click="handelHideInput('title')"
        v-show="!hideStatus.title"
        title="发票抬头"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.title ? form.title : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.title"
        v-model="form.title"
        ref="title"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="发票抬头"
        @blur="formValueChange('title')"
        placeholder="请输入发票抬头"
      />

      <!-- 电话 -->
      <van-cell
        @click="handelHideInput('phone')"
        v-show="!hideStatus.phone"
        title="电话"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <div v-if="phoneStatus" class="red">
          <div>{{ form.phone }}</div>
          <div style="font-size: 0.18rem">*请输入正确的手机号码</div>
        </div>
        <span v-else>
          {{ form.phone ? form.phone : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.phone"
        v-model="form.phone"
        ref="phone"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="电话"
        @blur="formValueChange('phone')"
        placeholder="电话"
      />

      <!-- 邮件 -->
      <van-cell
        @click="handelHideInput('email')"
        v-show="!hideStatus.email"
        title="邮件"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.email ? form.email : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.email"
        v-model="form.email"
        ref="email"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="邮件"
        @blur="formValueChange('email')"
        placeholder="请输入邮件"
      />

      <!-- 开票时间 -->
      <van-cell
        @click="handelHideCalendar('applyDate', 1)"
        title="开票时间"
        center
        is-link
        value="请选择"
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ form.applyDate ? form.applyDate : "请选择" }}
        </span>
      </van-cell>
      <van-calendar
        :min-date="minDate"
        :max-date="maxDate"
        :default-date="form.applyDate ? new Date(form.applyDate) : new Date()"
        title="开票时间"
        v-model="hideStatus.applyDate"
        @confirm="date => onConfirm(date, 'applyDate')"
      />

      <!-- 开票金额 -->
      <van-cell
        @click="handelHideInput('price')"
        v-show="!hideStatus.price"
        title="开票金额"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.price ? form.price : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.price"
        v-model="form.price"
        ref="price"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="开票金额"
        @blur="formValueChange('price')"
        placeholder="请输入开票金额"
      />

      <!-- 地址 -->
      <van-field
        label="地址"
        type="textarea"
        v-model="form.address"
        autosize
        maxlength="50"
        show-word-limit
        size="large"
        label-class="title-class"
        label-width="1rem"
        placeholder="请输入地址"
      />
    </van-cell-group>

    <van-button
      type="primary"
      style="margin-top: 0.6rem"
      :class="completeAll ? '' : 'huise'"
      @click="handelSubmit"
      round
      block
    >
      提交报名
    </van-button>
    <!-- <van-button type="primary" @click="$router.go(-1)" round block>
      返回
    </van-button> -->
    <div class="nav" @click="$router.go(-1)">返回</div>
  </div>
</template>
<script>
//eslint-disable prettier/prettier
import moment from "moment";
import axios from "axios";
// 统一加上headers
axios.interceptors.request.use(
  // eslint-disable-next-line prettier/prettier
  function (config) {
    // Do something before request is sent
    // console.log(config);
    config.headers = {
      version: "v1",
      "api-access-token": "ca87846db16a561b97c767e0624513f947f52345"
    };
    return config;
  },
  // eslint-disable-next-line prettier/prettier
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
export default {
  data() {
    return {
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2035, 0, 1),
      baseData: null,
      // 输入框的显示 (true) 和隐藏 (false)
      hideStatus: {
        // 名称
        name: false,
        // 开户行
        bank: false,
        // 银行账号
        bankAccount: false,
        // 发票抬头
        title: false,
        // 电话
        phone: false,
        // 邮件
        email: false,
        // 开票日期
        applyDate: false,
        // 开票金额
        price: false
      },
      // 最终要提交的信息
      form: {
        // 学生姓名
        name: "",
        // 开户行
        bank: "",
        // 银行账号
        bankAccount: "",
        // 发票抬头
        title: "",
        // 电话
        phone: "",
        // 邮件
        email: "",
        // 开票日期
        applyDate: "",
        // 开票金额
        price: "",
        // 地址
        address: ""
      },

      // 输入的手机号码的正误
      phoneStatus: false
    };
  },
  watch: {},
  computed: {
    // 是否填写完成 true 完成 false 没完成
    completeAll() {
      let isNull = true;
      for (let item in this.form) {
        const field = this.form[item];
        // console.log(field, 11111);
        if (field === "" || field == null) isNull = false;
        if (field instanceof Array && field.length < 0) isNull = false;
      }
      if (this.phoneStatus) isNull = false;
      return isNull;
    }
  },

  mounted() {
    // baseUrl;
    // this.form.gender = 1;
    // 请求页面的需要的一些数据
    axios("/api/student/apply").then(res => {
      // console.log(res);
      if (res.data.code !== 200) {
        this.$toast(res.data.msg || "出错了哦,请联系技术~");
        return false;
      }
      const data = res.data.data;
      this.baseData = data;
      console.log(data, "请求的数据");
    });
  },
  methods: {
    // 隐藏和显示输入框
    handelHideInput(refName) {
      console.log(refName, "refName");
      this.hideStatus[refName] = !this.hideStatus[refName];
      setTimeout(() => {
        this.$refs[refName].focus();
      });
    },
    // 输入框变化时
    formValueChange(filedName) {
      // 校验手机
      if (
        filedName === "phone" &&
        !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)
      ) {
        this.phoneStatus = true;
      } else if (filedName === "phone") {
        this.phoneStatus = false;
      }
      this.hideStatus[filedName] = !this.hideStatus[filedName];
    },
    /**
     * 显示和隐藏日期组件
     * filedName:字段的名称
     * isDisabled:是否是禁用的 false 禁用
     */
    handelHideCalendar(filedName, isDisabled) {
      if (!isDisabled) return;
      // filedName 为数字时为 缴费方式2
      if (typeof filedName === "number")
        this.hideStatus.dateList = this.hideStatus.dateList.map(
          (item, index) => {
            if (index === filedName) return true;
            else return item;
          }
        );
      else this.hideStatus[filedName] = true;
    },
    // 日期选择的变化
    onConfirm(date, filedName) {
      // console.log(date, filedName);
      this.form[filedName] = moment(date).format("YYYY-MM-DD");
      this.hideStatus[filedName] = false;
    },

    // 提交
    handelSubmit() {
      console.log(this.form, "form");
      // console.log(this.completeAll, "this.completeAll");

      if (!this.completeAll) {
        this.$toast("请先填写完整数据才能提交哦~");
        return false;
      }

      let form = {
        ...this.form
      };
      console.log(form);
    }
  }
};
</script>
<style lang="less">
.index {
  .huise {
    background-color: #bbb !important;
    border: 1px solid #bbb !important;
  }
  .orange {
    color: #ff5400 !important;
  }
  .red {
    color: #ff0000 !important;
  }
  .van-button--block {
    width: 3.48rem;
    height: 0.7rem;
    margin: 0.3rem auto;
  }
  .van-radio--horizontal:last-child {
    margin-right: 0;
  }
  .van-radio-group--horizontal {
    justify-content: flex-end;
  }
  .van-radio__icon {
    display: flex;
    align-items: center;
  }
  .img-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.16rem;
    height: 0.16rem;
    border: 1px solid #00be8b;
    border-radius: 50%;
    & > div {
      width: 0.08rem;
      height: 0.08rem;
      background: #00be8b;
      border-radius: 50%;
    }
  }
  .van-cell--clickable:active {
    background-color: #fff;
  }
  background-color: #f1f1f1;
  min-height: 100vh;
  padding-bottom: 1px;
  box-sizing: border-box;
  overflow: auto;
  .header-title {
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    font-size: 0.28rem;
    color: #333333;
    font-weight: bold;
    font-family: PingFang SC;
  }
  .title-class {
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .green-title-class {
    font-size: 0.26rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #00b584;
  }
  .value-class {
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  .value-margin {
    margin-right: 20px;
  }
  .value-flex {
    flex: 3 !important;
  }
  .table {
    font-size: 0.18rem;
    margin: 0 36px 0 16px;
  }
  .tr {
    display: flex;
    height: 0.49rem;
    line-height: calc(0.49rem - 1px);
    border-bottom: 1px solid #aaa;
    &:first-child {
      border-top: 1px solid #aaa;
      height: 0.6rem;
      line-height: calc(0.6rem - 2px);
    }
    .td,
    .th {
      width: calc((7.5rem - 52px - 2.2rem - 4px) / 4);
      border-right: 1px solid #aaa;
      text-align: center;
    }
    .td:first-child,
    .th:first-child {
      width: calc(2.2rem - 2px);
      border-left: 1px solid #aaa;
    }
  }
  .item-wrapper {
    display: flex;
    margin: 0 0.9rem;
    justify-content: space-between;
    div {
      width: 32%;
      text-align: center;
    }
    // div:nth-child(2) {
    //   text-align: center;
    // }
  }
  .nav {
    position: fixed;
    bottom: 10%;
    right: 0;
    border-radius: 0.15rem 0 0 0.15rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background-color: #78a4ff;
    color: #fff;
    font-size: 0.26rem;
  }
}
</style>
